<script setup>
import { useRouter } from "vue-router";
const imageCdn = 'https://tdesign.gtimg.com/miniprogram/images';
const swiperList = [
    `${imageCdn}/swiper1.png`,
    `${imageCdn}/swiper2.png`,
    `${imageCdn}/swiper1.png`,
    `${imageCdn}/swiper2.png`,
    `${imageCdn}/swiper1.png`,
];
const router = useRouter();
function navigationTo(name) {
    router.push({
        name: name
    })
}
</script>

<template>
    <main class="container">
        <div style="margin-bottom: 12px;">
            <t-swiper autoplay :navigation="{ type: 'dots-bar' }">
                <t-swiper-item v-for="(item, index) in swiperList" :key="index" style="height: 200px;">
                    <img :src="item" alt="img" class="img">
                </t-swiper-item>
            </t-swiper>
        </div>

        <div style="margin-bottom: 12px;">
            <t-grid :column="3" class="grid-apps">
                <t-grid-item text="增加物品" @click="navigationTo('material-add')">
                    <template #image>
                        <t-icon name="add-rectangle" size="large" style="color: #0052d9;"></t-icon>
                    </template>
                </t-grid-item>
                <t-grid-item text="库存清点" @click="navigationTo('material-check')">
                    <template #image>
                        <t-icon name="chart-bar" size="large" style="color: #0052d9;"></t-icon>
                    </template>
                </t-grid-item>
                <t-grid-item text="库存查询" @click="navigationTo('material-search')">
                    <template #image>
                        <t-icon name="search" size="large" style="color: #0052d9;"></t-icon>
                    </template>
                </t-grid-item>
                <t-grid-item text="物品领用" @click="navigationTo('material-receive')">
                    <template #image>
                        <t-icon name="arrow-triangle-up" size="large" style="color: #0052d9;"></t-icon>
                    </template>
                </t-grid-item>
                <t-grid-item text="物品入库" @click="navigationTo('material-put')">
                    <template #image>
                        <t-icon name="arrow-triangle-down" size="large" style="color: #0052d9;"></t-icon>
                    </template>
                </t-grid-item>
                <t-grid-item text="更多" @click="navigationTo('apps')">
                    <template #image>
                        <t-icon name="more" size="large" style="color: #0052d9;"></t-icon>
                    </template>
                </t-grid-item>
            </t-grid>
        </div>

        <div>
            <t-cell-group bordered>
                <t-cell title="出入库记录" arrow hover @click="navigationTo('record-put')"></t-cell>
                <t-cell title="审核待办" arrow hover @click="navigationTo('record-examine')"></t-cell>
                <t-cell title="库存预警" arrow hover @click="navigationTo('material-warning')"></t-cell>
            </t-cell-group>
        </div>
    </main>
</template>

<style scoped>
img {
    display: block;
    width: 100%;
}
</style>